<template>
  <div class="audio">
    <audio :src="src" ref="audio" @timeupdate="updateTime">
      <track default src="#" srclang="ja" kind="subtitles" @cuechange="cueChange"/>
    </audio>
    <div class="progress">
      <div class="progress-bar" :style="progress"></div>
    </div>
    <div class="btn-group-sm border border-danger">
      <button class="btn btn-primary btn-sm" @click.stop="prevPlay">上一句</button>
      <button class="btn btn-primary" @click.stop="nextPlay">下一句</button>
      <button class="btn btn-primary" @click.stop="play">播放</button>
      <button class="btn btn-primary" @click.stop="pause">停止</button>
      <button class="btn btn-primary" @click.stop="replay">重播</button>
      <button class="btn btn-primary" @click.stop="setRate">倍速 {{rate}}</button>
    </div>
    <div class="subtitle" v-html="subtitle"></div>
  </div>
</template>

<script>
  export default {
    props: {
      src: {
        type: String,
        default: '#'
      },
      start: {
        type: Number,
        default: 0.0
      },
      end: {
        type: Number,
        default: 0.0
      },
      mode: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        currentTime: 0,
        rate: 1,
        start_time: 0,
        end_time: 0,
        subtitle: ''
      }
    },
    computed: {
      progress() {
        return {
          width: (this.currentTime - this.start_time) / (this.end_time - this.start_time) * 100 + '%'
        }
      }
    },
    methods: {
      play() {
        this.$emit('play')
        // audio对象的属性参考URL: https://www.w3school.com.cn/jsref/dom_obj_audio.asp
        this.$refs.audio.currentTime = this.start_time
        this.$refs.audio.play()
      },
      pause() {
        this.$refs.audio.pause()
      },
      replay() {
        this.$refs.audio.currentTime = 0
        this.$refs.audio.play()
      },
      setRate() {
        // 0.5, 0.75, 1.0, 1.25, 1.5, 1.75, 2.0
        if (this.rate < 2.0) {
          this.rate = this.rate +  0.25
        } else {
          this.rate = 0.5
        }

        this.$refs.audio.playbackRate = this.rate
      },
      prevPlay() {
        this.pause()

        if (this.start_time - 10 <= 0) {
          this.start_time = 0
          this.end_time = 10
        } else {
          this.end_time = this.start_time
          this.start_time = this.start_time - 10
        }
        // this.$refs.start_time.value = this.start_time
        // this.$refs.end_time.value = this.end_time
        this.play()
      },
      nextPlay() {
        this.pause()
        this.start_time = this.end_time
        if (this.end_time + 10 > this.$refs.audio.duration) {
          this.end_time = this.$refs.audio.duration
        } else {
          this.end_time = this.end_time + 10
        }
        this.play()
      },
      updateTime() {
        this.currentTime =  Math.floor(this.$refs.audio.currentTime)
        if (this.end_time != 0 && this.$refs.audio.currentTime >= this.end_time) {
          this.pause()
        }
      },
      updateStartTime(e) {
        this.start_time = Number.parseFloat(e.target.value)

      },
      updateEndTime(e) {
        this.end_time = Number.parseFloat(e.target.value)
      },
      cueChange(e) {
        console.log(e.target.track.activeCues)
        if (e.target.track.activeCues.length > 0) {
          this.subtitle = e.target.track.activeCues[0].text
        } else {
          this.subtitle = ''
        }
      }
    },
    // 定义生命周期函数
    mounted() {
      console.log(this)
    }
  }
</script>

<style scoped>
  .audio {
    margin-top: 40px;
  }
</style>
